<!--
 @description 风格系列
 @fileName StyleSerice.vue
 @author zengqiongying
 @created 2022/12/30 14:52:00
-->
<template>
  <div class="list-page">
    <div class="tabs-box" :style="{'top':tabTop+'px','left':tabLeft+'px'}" @touchstart.stop="" @touchend.stop="" @touchmove.stop="">
      <ScrollTab v-model="confId" :list="tabList" />
    </div>
    <div v-if="confId" class="content-list">
      <div :class="['c-title',{'inner-title':isInline}]">{{ tabName }}</div>
      <List
        ref="list"
        class="list-page-container"
        :finished.sync="finished"
        :reset-fun="resetData"
        :load="load"
        :refresh="load"
        :offset="100"
        :set-page-size="24"
        :finished-text="finishedText"
        :refresh-disabled="refreshDisabled"
      >
        <div slot="list" class="show-content-list">
          <ShowItem
            v-for="(item,i) in list"
            :key="i"
            :src="item.picUrl"
            :name="item.itemDesc"
            :host="imgHost"
            :column="isInline?2:3"
            @click="handleClickItem(item)"
          />
        </div>
      </List>
    </div>
  </div>
</template>

<script>
import ScrollTab from '@/components/ScrollTab'
import ShowItem from './ShowItem'
import List from '@/components/PageList'
import { getStyleSeries, getSeriesPageByStyleId } from '@/apis/index'
import mixin from './minxin'
export default {
  name: 'StyleSericeList',
  components: { ScrollTab, List, ShowItem },
  mixins: [mixin],
  data() {
    return {

    }
  },
  methods: {
    getTabList() {
      getStyleSeries().then(res => {
        this.tabList = res.data || []
        if (this.tabList.length === 0) {
          this.confId = ''
        } else {
          this.confId = this.tabList[0].id
        }
      })
    },
    load(page, rows) {
      const data = {
        page,
        rows,
        styleConfId: this.confId
      }
      return getSeriesPageByStyleId(data).then(res => {
        const records = res.data.records || []
        this.list.push(...records)
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    handleClickItem(row) {
      const { attrId, itemId, itemDesc } = row
      this.$router.push({ path: '/goods/list', query: { sericesId: `${attrId}_${itemId}`, name: itemDesc }})
    }
  }
}

</script>
<style lang='less' scoped>
@import url('./tab.less');
.show-content-list{
  margin:0 -8px;
  display: flex;
  flex-wrap: wrap;
}
</style>
